<template>
  <div id="app">
    <el-button type="primary" size="mini"  @click="handleCreate()">新建</el-button>
    <el-table size="small" current-row-key="id" :data="dataList" @selection-change="handleSelectionChange" stripe highlight-current-row>
      <el-table-column type="index" align="center" label="序号"></el-table-column>
      <el-table-column type="selection"  prop="id" label="" ></el-table-column>
      <el-table-column prop="name" label="收货人" align="center"></el-table-column>
      <el-table-column prop="address" label="地址" align="center"></el-table-column>
      <el-table-column prop="birthday" label="时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <!--<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>-->
          <el-button size="mini" type="danger" @click="deleteSelection(null)" :disabled="delBtnStu">批量删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pagination.total">
      </el-pagination>
    </div>
    <!-- 编辑标签弹层 -->
    <div class="add-form">
      <el-dialog title="" :visible.sync="dialogFormVisible4Edit">
        <template>
          <el-tabs  type="card">
              <el-form ref="dataEditForm" :model="formData" label-position="right" label-width="100px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="学生名称" prop="name">
                      <el-input v-model="formData.name"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="时间" prop="date">
                      <el-date-picker type="date" placeholder="选择时间" v-model="formData.date" style="width: 100%;"
                                      format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
          </el-tabs>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleEdit()">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 新增标签弹层 -->
    <div class="add-form">
      <el-dialog title="" :visible.sync="dialogFormVisible">
        <template>
          <el-tabs  type="card">
              <el-form ref="dataAddForm" :model="formData"  label-position="right" label-width="100px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="收货人" prop="name">
                      <el-input v-model="formData.name"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-cascader :options="options" clearable></el-cascader>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="时间" prop="date">
                      <el-date-picker type="date" placeholder="选择时间" v-model="formData.date" style="width: 100%;"
                                      format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
          </el-tabs>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleAdd()">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
    data(){
      return {
          pagination: {//分页相关属性
              currentPage: 1,//当前页码
              pageSize:3,//每页显示的记录数
              total:0,//总记录数
          },
          dataList: [],//列表数据
          formData: {},//表单数据
          tableData:[],//新增和编辑表单中对应的检查项列表数据
          dialogFormVisible: false,//控制添加窗口显示/隐藏
          dialogFormVisible4Edit:false,//控制编辑窗口显示/隐藏
          multipleSelection:[],//数组：通过这个数组可以获取勾选到的数组的内容
          delBtnStu:true //批量删除按钮默认为不可选中状态
      }
    },
    created(){
      this.findPage()
    },
    methods:{
      handleSelectionChange(val) {
            this.multipleSelection = val;
            //通过数组长度来判断是否有选中信息
            this.delBtnStu= val.length==0
        },
        deleteSelection(id){
            this.$confirm('此操作将永久删除选中文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var ids=[]
                if(id){ //如果id不为空表明是单条数据删除
                    ids.push(id)
                }else{ //如果id不为空表明是批量删除,需要遍历multipleSelection数组获取所有id
                    this.multipleSelection.forEach( row => {
                        ids.push(row.id)
                    })
                }
               axios.post("http://localhost:8081/sys/person/dels?ids="+ids).then(res=> {
                        //提示信息
                   this.$message({
                       type:res.data.data.flag?'error':'success',
                       message:res.data.data.message
                   });
                        //刷新数据
                        this.findPage()
                    })
            })
        },
     findPage(){
          axios.post("http://localhost:8081/sys/sh/findPage",this.pagination).then(res=>{
              console.log(confirm);
              this.dataList = res.data.data.rows;//当前页展示的数据集合
              this.pagination.total = res.data.data.total;//总数据量
          })
      },
        handleCurrentChange(currentPage) {
            //为模型数据赋值（当前页面）
            this.pagination.currentPage = currentPage;
            this.findPage();
        },
     /*  //添加
        handleAdd () {
            this.$refs['dataAddForm'].validate((valid) => {
                if(valid){
                    axios.post("http://localhost:8081/sys/person/add",this.formData).then((res) => {
                        //关闭新增窗口
                        this.dialogFormVisible = false;
                        this.$message({
                            type:res.data.data.flag?'error':'success',
                            message:res.data.data.message
                        });
                    }).catch((res)=>{
                        if(res.message.includes("403")) {
                            this.$message.error("无操作权限！")
                        }
                    }).finally(() => {

                        this.findPage();
                    });
                }else{
                    //表单校验不通过
                    this.$message.error("表单数据校验失败!");
                    return false;
                }
            });
        },*/
        // 重置表单
       resetForm() {
            this.formData = {};
        },
        //弹出添加窗口
        handleCreate() {
            this.resetForm();
            this.dialogFormVisible = true;
            //发送ajax请求，查询所有的检查项信息，转为json，赋值给tableData
        },
        // 弹出编辑窗口
        handleUpdate(row) {
            //弹出编辑窗口
            this.dialogFormVisible4Edit = true;
            //用于基本信息的回显
            this.formData = row;
            // this.formData.hobby = this.formData.hobby.split(",");//处理多选框
        },
        //编辑
        handleEdit() {
            //发送ajax请求，将修改后的表单数据（检查组基本信息、勾选的检查项）提交到后台进行处理
            this.$refs['dataEditForm'].validate((valid) => {
                if(valid){
                    // this.formData.hobby = this.formData.hobby.join(",");
                    axios.post("http://localhost:8081/sys/person/edit",this.formData).then((res) => {
                        //关闭编辑窗口
                        this.dialogFormVisible4Edit = false;
                        this.$message({
                            type:res.data.data.flag?'error':'success',
                            message:res.data.data.message
                        });
                    }).catch((res)=>{
                        if(res.message.includes("403")) {
                            this.$message.error("无操作权限！")
                        }
                    }).finally(() =>{
                        this.findPage();
                    });
                }else{
                    //表单校验不通过
                    this.$message.error("数据校验失败，请检查你的输入信息是否正确！");
                    return false;
                }
            });
        },
    }
}
</script>

<style>
  .datatable {
    position: relative;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    color: rgb(96, 98, 102);
    overflow: hidden;
    flex: 1 1 0%;
  }
  .datatable td, .datatable th {
    padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }
</style>